<template>
	<view class="box">
		<view class="header">
			<u-subsection :list="list" :current="current" activeColor="#2a9d26" @change="sectionChange"></u-subsection>
		</view>
		<view class="main">
			<div class="movie" v-for="(item,index) in orderList" :key="index">
				<div class="content">
					<p class="movieTitle">{{item.movieName}}</p>
					<p style="font-size: 24rpx;">{{item.theatreName}}  {{item.roomName}}</p>
					<p style="font-size: 24rpx;">座位号：{{item.seatRow}}排{{item.seatCol}}座</p>
					<p style="font-size: 24rpx;">时间：<span style="color: red;border: 1px dashed red;">{{item.startTime}}--{{item.endTime}}</span></p>
					<u--text text="删除订单" size='12' color="blue" decoration="underline" @click="handleDelete(item.id)"></u--text>
					
				</div>
				<div class="btn" v-if="item.status=='N'">
					<p style="font-size: 20rpx;margin-top: -70rpx;margin-bottom: 30rpx;">下单时间：{{item.createTime}}</p>
					<u-button size="small" type="primary" shape="circle" text="立即支付" @click="payMoney(item.id)">
						
					</u-button>
				</div>
				<div class="btn" v-else>
					<p style="font-size: 20rpx;margin-top: -70rpx;margin-bottom: 30rpx;">支付时间：{{item.updateTime}}</p>
					<u-button size="small" type="success" disabled shape="circle" text="已支付">
						
					</u-button>
				</div>
				
			</div>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['全部', '待付款', '已付款'],
				current: 0,
				orderList:[],
				allOrders:[],
				show:false
				
			}
		},
		onLoad() {
			this.getOrderLists()
		},
		methods: {
			getOrderLists(){
				this.$request({
					url:'/prod-api/api/movie/ticket/order/list',
					method:'GET',
				}).then(res=>{
					console.log(res);
					this.orderList=res.data.rows
					this.allOrders=res.data.rows.reverse()
				}).catch(err=>{
					console.log('接口出现错误',err);
				})
			},
			sectionChange(index) {
				this.current = index;
				if(index==1){
					this.orderList=this.allOrders.filter(o=>{
						return o.status=="N"
					})
				}else if(index==2){
					// this.getOrderLists()
					this.orderList=this.allOrders.filter(o=>{
						return o.status=="Y"
					})
				}else{
					this.orderList=this.allOrders
				}
			},
			payMoney(id){
				this.$request({
					url:'/prod-api/api/movie/ticket/order/pay/'+id,
					method:'GET',
					
				}).then(res=>{
					this.getOrderLists()
				}).catch(err=>{
					console.log('接口出现错误',err);
				})
				
			},
			handleDelete(id){
				if(window.confirm("你确定要删除该条订单吗？")){
					this.delOrders(id)
				}else{
					return
				}
			},
			delOrders(id){
				this.$request({
					url:'/prod-api/api/movie/ticket/order/'+id,
					method:'DELETE',
					
				}).then(res=>{
					this.getOrderLists()
					this.show=false
				}).catch(err=>{
					console.log('接口出现错误',err);
				})
			}
		}
	}
</script>

<style lang="scss">
.box{
	.header{
		// padding: 10rpx 20rpx;
		
	}
	.main{
		.movie{
			
			.movieTitle{
				font-family: '楷体';
				font-weight: bold;
			}
			border-bottom: 8rpx solid #eee;
			padding: 10rpx 20rpx;
			.content{
				p{
					margin-bottom: 14rpx;
				}
			}
			.btn{
				float: right;
				margin-top: -60rpx;
				button{
					width: 220rpx;
				}
			}
		}
		
	}
}
</style>
